frontend/pages/e/[uuid]/waitingList.tsx (view raw)
1import {useState, useMemo, PropsWithChildren} from 'react';
2import EventLayout, { TabComponent } from '../../../layouts/Event';
3import {
4 EventByUuidDocument,
5} from '../../../generated/graphql';
6import useProfile from '../../../hooks/useProfile';
7import WaitingList from '../../../containers/WaitingList';
8import {AddPassengerToWaitingList} from '../../../containers/NewPassengerDialog';
9import {initializeApollo} from '../../../lib/apolloClient';
10
11interface NewPassengerDialogContext {
12 addSelf: boolean;
13}
14
15interface Props {
16 eventUUID: string;
17}
18
19const Page = (props: PropsWithChildren<Props>) => {
20 return <EventLayout {...props} Tab={WaitingListTab} />;
21};
22
23const WaitingListTab: TabComponent = (props: {event}) => {
24 const {user} = useProfile();
25 const [addPassengerToWaitingListContext, toggleNewPassengerToWaitingList] =
26 useState<NewPassengerDialogContext | null>(null);
27
28 const canAddSelf = useMemo(() => {
29 if (!user) return false;
30 const isInWaitingList = event?.waitingPassengers?.some(
31 passenger => passenger.user?.id === `${user.id}`
32 );
33 const isInTravel = event?.travels.some(travel =>
34 travel.passengers.some(passenger => passenger.user?.id === `${user.id}`)
35 );
36 return !(isInWaitingList || isInTravel);
37 }, [event, user]);
38
39 return (
40 <>
41 <WaitingList
42 canAddSelf={canAddSelf}
43 getToggleNewPassengerDialogFunction={(addSelf: boolean) => () =>
44 toggleNewPassengerToWaitingList({addSelf})}
45 />
46 {!!addPassengerToWaitingListContext && (
47 <AddPassengerToWaitingList
48 open={!!addPassengerToWaitingListContext}
49 toggle={() => toggleNewPassengerToWaitingList(null)}
50 addSelf={addPassengerToWaitingListContext.addSelf}
51 />
52 )}
53 </>
54 );
55};
56
57export async function getServerSideProps(ctx) {
58 const {uuid} = ctx.query;
59 const apolloClient = initializeApollo();
60 const {data = {}} = await apolloClient.query({
61 query: EventByUuidDocument,
62 variables: {uuid},
63 });
64 const {eventByUUID: event} = data;
65 const {host = ''} = ctx.req.headers;
66
67 return {
68 props: {
69 event,
70 eventUUID: uuid,
71 metas: {
72 title: event?.name || '',
73 url: `https://${host}${ctx.resolvedUrl}`,
74 },
75 },
76 };
77}
78
79export default Page;